<template>
	<view class="roc-input-range">
		<view class="input-box">
			<u-input
				v-model="minValue"
				:type="item.props.type || 'text'"
				:disabled="item.props.disabled || false"
				:clearable="item.props.clearable || false"
				:maxlength="item.props.maxlength || 140"
				:placeholder="item.props.placeholder || '请填写最小值'"
				:showWordLimit="item.props.showWordLimit || false"
				:focus="item.props.autofocus || false"
				:readonly="item.props.readonly || false"
				:prefixIcon="item.props.prefixIcon || ''"
				:prefixIconStyle="{ fontSize: '26rpx' }"
				:suffixIcon="item.props.suffixIcon || ''"
				:suffixIconStyle="{ fontSize: '26rpx' }"
				border="none"
			>
				<template #suffix>
					<text class="input-right-slot" v-if="item.type == 'input'">{{ item.children[0].children[0] }}</text>
				</template>
			</u-input>
		</view>
		<view class="input-box">
			<u-input
				v-model="maxValue"
				:type="item.props.type || 'text'"
				:disabled="item.props.disabled || false"
				:clearable="item.props.clearable || false"
				:maxlength="item.props.maxlength || 140"
				:placeholder="item.props.placeholder || '请填写最大值'"
				:showWordLimit="item.props.showWordLimit || false"
				:focus="item.props.autofocus || false"
				:readonly="item.props.readonly || false"
				:prefixIcon="item.props.prefixIcon || ''"
				:prefixIconStyle="{ fontSize: '26rpx' }"
				:suffixIcon="item.props.suffixIcon || ''"
				:suffixIconStyle="{ fontSize: '26rpx' }"
				border="none"
			>
				<template #suffix>
					<text class="input-right-slot" v-if="item.type == 'input'">{{ item.children[0].children[0] }}</text>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
export default {
	name: 'roc-date-picker-range',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		value: {
			type: String,
			default: ''
		}
	},
	watch: {
		value: {
			handler(newVal) {
				this.minValue = newVal.split('&')[0] ?? '';
				this.maxValue = newVal.split('&')[1] ?? '';
			},
			immediate: true
		},
		allValue: {
			handler(newVal) {
				this.$emit('input', newVal)
			},
		}
	},
	computed: {
		allValue() {
			return `${this.minValue}&${this.maxValue}`
		}
	},
	data() {
		return {
			minValue: '',
			maxValue: '',
		};
	},
	methods: {}
};
</script>

<style lang="scss">
.roc-input-range {
	width: 100%;
	.input-box {
		margin: 10rpx 0;
	}
}
</style>
